import React, {Component} from 'react';
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import TheImage from '@/components/TheImage';
import SelectGoods from "./component/selectGoods";
import { apiGetHomeGoodsSortList,apiAddHomeGoodsSort } from '@/request/app/homeFeatured';
import {message, Space, Typography} from "antd";
const { Text } = Typography;

class Index extends Component {
    state = {
        columns: [
            {
                title: "商品图片",
                dataIndex: "goodsShowImages",
                key: "goodsShowImages",
                render: (text) => {
                    if (text){
                        let arr = text.split(',')
                        return <Space>
                            {
                                arr.map(v => {
                                    return <TheImage src={v} width={80} height={80} />
                                })
                            }
                        </Space>
                    }
                }
            },
            {
                  title: "商品ID",
                  dataIndex: "goodsId",
                  key: "goodsId",
            },
            {
                title: "商品名称",
                dataIndex: "goodsName",
                key: "goodsName",
                ellipsis: {
                    showTitle: false,
                },
                render: (text, record) => {
                    return <Text
                        style={{ width: 300 }}
                        ellipsis={{
                            tooltip: text,
                        }}
                    >
                        {text}
                    </Text>
                }
            },
            {
                title: "排序",
                dataIndex: "homeGoodsSort",
                key: "homeGoodsSort",
            },
            {
                title: "操作",
                fixed: "right",
                width: 200,
                render: (text, render) => {
                    return (
                        <div>
                            <TheButton haspermi={['app:homeFeatured:edit']} onClick={() => this.goEdit(render.goodsId)}>修改</TheButton>
                            <TheButton haspermi={['app:homeFeatured:del']} onClick={() => this.goDel(render.goodsId)}>删除</TheButton>
                        </div>
                    );
                },
            },
        ],
        dataSource: [],
        total: 0,
        loading: false
    };
    componentDidMount() {
        this.getData()
    }
    getData = async () => {
        apiGetHomeGoodsSortList().then(res => {
            if (res.code === 0){
                this.setState({
                    dataSource: res.data
                })
                this.selectGoods.setDisData(res.data)
            }
        })
    }
    goAdd = () => {
        const { dataSource } = this.state;
        if (dataSource.length < 10){
            this.selectGoods.openModal('add')
        }
        else {
            message.warning('最多推荐10个商品')
        }
    }
    goEdit = (id) => {
        this.selectGoods.openSortModal('edit',id)
    }
    goDel = (id) => {
        apiAddHomeGoodsSort({
            goodsId: id,
            type: 'D'
        }).then(res=>{
            if (res.code === 0){
                message.success('删除成功')
                this.getData()
            }
        })
    }
    render() {
        const {
            columns,
            dataSource,
            loading
        } = this.state;
        return (
            <div className={"p-layout-box commodity-content"}>
                <Space>
                    <TheButton haspermi={['app:homeFeatured:add']} type="default" size="middle" onClick={this.goAdd}>
                        新增
                    </TheButton>
                </Space>
                <br/>
                <TheTable
                    rowKey={'goodsId'}
                    columns={columns}
                    dataSource={dataSource}
                    loading={loading}
                />
                <SelectGoods
                    ref={(ref)=>this.selectGoods = ref}
                    refresh={this.getData}
                />
            </div>
        );
    }
}

export default Index;
